<template>
    <a-modal
            title="选择角色"
            width="700px"
            :visible="visible"
            @ok="handleOk"
            :maskClosable="false"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
    >
        <a-checkbox-group
                v-model="checkboxData"
                class="xlSearch-group"
        >
            <a-row v-if="authList.length">
                <a-col :span="8" v-for="(item,index) in authList" :key="index"><a-checkbox :value="item.id">{{item.systemRoleName}}</a-checkbox></a-col>
            </a-row>
        </a-checkbox-group>
    </a-modal>
</template>
<script>
    import {batchSave, roleList, userRoleList} from "../../../../assets/api";
    export default {
        name: "index",
        data(){
            return{
                visible:false,
                checkboxData:[],
                authList:[],
                authId:undefined,
                confirmLoading:false
            }
        },
        created(){
            roleList()
                .then(result=>{
                    this.authList = result.result
                })
        },
        methods:{
            handleOk(){
                this.confirmLoading = true
                batchSave({
                    param: {
                        loginUserId:this.authId,
                        roleIdList:this.checkboxData
                    }
                })
                    .then(result=>{
                        this.visible = false
                        this.confirmLoading = false
                    })
            },
            handleCancel(){
                this.visible = false
            },
            formatValue(data){
                this.authId = data.id
                userRoleList({param:data.loginUserCode})
                    .then(result=>{
                        this.checkboxData = result.result.loginUserRoleList.map(item=>{
                            return item.id
                        })
                        console.log(this.checkboxData)
                    })
            }
        }
    }
</script>
<style scoped>
</style>
